<template>
  <div class="daddy">
    <el-row :gutter="20">
      <el-col :span="8"
        ><div class="grid-content bg-purple no1" id="barGraph"></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content no2" id="barGraph2"></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content no3" id="barGraph3"></div
      ></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16"><div class="grid-content no4" id="barGraph4"></div></el-col>
      <el-col :span="8"><div class="grid-content no5" id="barGraph5"></div></el-col>
    </el-row>
    <el-row>
      <el-col><img src="40.png" alt=""></el-col>
    </el-row>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
export default {
  name: "Index",
  data: function() {
    return {};
  },
  mounted() {
    this.drawBar();
    this.drawBar2();
    this.drawBar3();
    this.drawBar4();
    this.drawBar5();
  },
  methods: {
    drawBar() {
      // 基于dom，初始化echarts实例
      let barGraph = echarts.init(document.getElementById("barGraph"));
      // 绘制图表
      barGraph.setOption({
        title: {
          text: "保单数量",
          left: "left",
          padding: [20, 35],
          subtext: "The number of policies for the following month",
          textStyle: {
            fontSize: 25
          },
          subtextStyle: {
            fontSize: 15
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          show: false,
          type: "category",
          data: ["保单"]
        },
        series: [
          {
            type: "bar",
            barWidth: 20,
            data: [100],
            itemStyle: {
              normal: {
                color: "#FFFFFF"
              }
            }
          }
        ]
      });
    },
    drawBar2() {
      // 基于dom，初始化echarts实例
      let barGraph = echarts.init(document.getElementById("barGraph2"));
      // 绘制图表
      barGraph.setOption({
        title: {
          text: "司机数量",
          left: "left",
          padding: [20, 35],
          subtext: "The current total number of drivers",
          textStyle: {
            fontSize: 25
          },
          subtextStyle: {
            fontSize: 15
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          show: false,
          type: "category",
          data: ["保单"]
        },
        series: [
          {
            name: "2011年",
            type: "bar",
            barWidth: 20,
            data: [100],
            itemStyle: {
              normal: {
                color: "#FFFFFF"
              }
            }
          }
        ]
      });
    },
    drawBar3() {
      // 基于dom，初始化echarts实例
      let barGraph = echarts.init(document.getElementById("barGraph3"));
      // 绘制图表
      barGraph.setOption({
        title: {
          text: "店铺数量",
          left: "left",
          padding: [20, 35],
          subtext: "Total number of stores in Chengdu",
          textStyle: {
            fontSize: 25
          },
          subtextStyle: {
            fontSize: 15
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          show: false,
          type: "category",
          data: ["保单"]
        },
        series: [
          {
            name: "2011年",
            type: "bar",
            barWidth: 20,
            data: [100],
            itemStyle: {
              normal: {
                color: "#FFFFFF"
              }
            }
          }
        ]
      });
    },
    drawBar4() {
      // 基于dom，初始化echarts实例
      let barGraph = echarts.init(document.getElementById("barGraph4"));
      // 绘制图表
      barGraph.setOption({
        title: {
          text: "订单增幅",
          left: "left",
          padding: [20, 35],
          textStyle: {
            fontSize: 25
          }
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 1290, 350, 1330, 670],
            type: "line"
          }
        ]
      });
    },
    drawBar5() {
      // 基于dom，初始化echarts实例
      let barGraph = echarts.init(document.getElementById("barGraph5"));
      // 绘制图表
      barGraph.setOption({
        title: {
          text: '易理赔客户分布',
          subtext: '中国(不含港澳台)',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['成都', '北京', '上海', '广州', '杭州']
        },
        series: [
          {
            name: '用户分布',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 335, name: '杭州'},
              {value: 310, name: '北京'},
              {value: 234, name: '上海'},
              {value: 135, name: '广州'},
              {value: 1548, name: '成都'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
.daddy {
  height: 100%;
  min-width: 1540px;
}
img{
  width: 1540px;
  margin-top: 20px;
}
.el-row {
  margin-bottom: 20px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  min-height: 230px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.no1 {
  background-color: rgb(97,160,168);
  margin-top: 20px;
  height: 250px;
}
.no2 {
  background-color: rgb(98, 112, 125);
  margin-top: 20px;
  height: 250px;
}
.no3 {
  background-color: rgb(243, 89, 89);
  margin-top: 20px;
  height: 250px;
}
.no4 {
  background-color: rgb(61, 185, 175);
  height: 350px;
  margin-top: 30px;
}
.no5 {
  background-color: white;
  height: 350px;
  margin-top: 30px;
  background-size: 408px 250px;
}
</style>
